<!--
 * @Author: your name
 * @Date: 2021-05-17 14:24:57
 * @LastEditTime: 2021-05-17 21:53:54
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue-demo\src\components\Table.vue
-->
<template>
  <div>
    <div class="table">
      <div class="tr">
        <span>id</span>
        <span>姓名</span>
        <!-- <span>操作</span> -->
      </div>
      <div class="tr" v-for="it in tableData2" :key="it.id">
        <span>{{ it.id }}</span>
        <span>{{ it.name }}</span>
        <!-- <span>删除</span> -->
      </div>
    </div>
    <Paging
      :pageTotal="tableData.length"
      :pageIndex="pageIndex"
      @chengePageIndex="chengePageIndex"
    ></Paging>
  </div>
</template>

<script>
import Paging from "./Paging";
export default {
  props: {
    tableData: {
      type: Array,
      default: () => [],
    }
  },
  data() {
    return {
      pageIndex: 1,
    };
  },
  computed: {
    tableData2() {
      return this.tableData.slice(
        (this.pageIndex - 1) * 40,
        this.pageIndex * 40
      );
    },
  },
  methods: {
    chengePageIndex(i) {
      this.pageIndex = i;
    },
  },
  components: {
    Paging,
  },
};
</script>

<style>
.table {
  width: 80%;
  margin: 40px auto 0;
}

.table .tr {
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid #E4E7ED;
}

.table .tr:nth-child(2n) {
  background: #EBEEF5;
}

.table .tr:nth-child(2n -1) {
  background: #F2F6FC;
}

.table .tr span {
  padding: 10px 20px;
}
</style>